<template>
  <div>
    <div class="pagebg classify"></div>
    <div class="container" v-loading.fullscreen.lock="fullscreenLoading">
      <h1 class="t_nav">
        <span>不要轻易放弃。学习成长的路上，我们长路漫漫，只因学无止境。</span>
        <router-link class="n1" :to="{path: '/',query: {siteId: siteId}}">网站首页</router-link>
        <!-- <a :href="['/?siteId='+siteId]" class="n1" target="_self"></a> -->
        <a href="javascript:void(0);" class="n2">分类</a>
      </h1>

      <div class="sortBox">
        <div class="time">
          <div class="block">
            <el-tree :data="classList" :props="defaultProps" @node-click="getNewsList"></el-tree>
            <!-- <div class="radio" style="margin-bottom:20px;"></div> -->
            <!-- <el-timeline :reverse="reverse">
              <el-timeline-item v-for="(activity, index) in activities" hide-timestamp :key="index">
                <span
                  @click="getBlogList(activity.uid)"
                  :class="[activity.uid == selectBlogUid ? 'sortBoxSpan sortBoxSpanSelect' : 'sortBoxSpan']"
                >{{activity.sortName}}</span>
              </el-timeline-item>
            </el-timeline> -->
          </div>
        </div>

        <div class="article">
          <div class="block" v-infinite-scroll="load">
            <el-timeline>
              <el-timeline-item v-for="item in newsList" :key="item.id" :timestamp="item.createDate" placement="top">
                <el-card>
                  <h4 @click="goToList('blogContent', item)" class="itemTitle">{{item.name}}</h4>
                  <br>

                  <el-tag class="elTag" v-if="item.author" @click="goToList('author', item)">{{item.source}}</el-tag>

                  <el-tag class="elTag" type="success" v-if="item.blogSort != null" @click="goToList('blogSort', item)">
                    {{item.discription}}</el-tag>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getBlogSortList,
    getArticleByBlogSortUid
  } from "../api/classify";
  import {
    getNewsByClasslistId,
    getWebNavbar
  } from "../api/index";
  export default {
    data() {
      return {
        selectBlogUid: "",
        reverse: false,
        activities: [],
        itemByDate: [],
        articleByDate: {},
        count: 0,
        currentPage: 1,
        pageSize: 10,
        classlistId: this.$route.query.classlistId,
        classlistName: this.$route.query.name,
        classList: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        newsList: [], //新闻列表
        fullscreenLoading: false,
        siteId: this.$store.state.app.siteId
      };
    },
    components: {
      //注册组件
    },
    mounted() {},
    created() {
      this.getWebNavbarList()
    },
    watch: {
      //监听相同路由下参数变化的时候，从而实现异步刷新
      '$route'(to,from) {
          //做一些路由变化的响应
          //打开加载动画
          this.fullscreenLoading = true
          this.classlistId = this.$route.query.classlistId
          this.classlistName= this.$route.query.name;
          //重新获取数据
          this.getWebNavbarList()
      }
    },
    methods: {
      // 获取导航栏列表
      getWebNavbarList() {
        this.classList = [];
        const parent = {
           id: this.classlistId,
           name: this.classlistName,
           children: []
        };
        var params = {};
        params.lazy = true;
        params.parentId = this.classlistId;
        getWebNavbar(params).then(response => {
          if (response.code == this.$ECode.SUCCESS) {
            parent.children = response.data;
            this.classList.push(parent);
            this.getNewsByClasslistId(this.classlistId);
          }
          this.fullscreenLoading = false
        })
      },
      getNewsByClasslistId(classlistId) {
        getNewsByClasslistId(classlistId).then(response => {
          if (response.code == this.$ECode.SUCCESS) {
            this.newsList = response.data.records;
          }
        });
      },
      getNewsList(data){
        console.log(data)
        getNewsByClasslistId(data.id);
      },
      getBlogList(blogSortUid) {
        this.selectBlogUid = blogSortUid;
        var params = new URLSearchParams();
        params.append("blogSortUid", blogSortUid);
        getArticleByBlogSortUid(params).then(response => {
          if (response.code == this.$ECode.SUCCESS) {
            this.itemByDate = response.data.records;
            this.currentPage = response.data.current;
            this.pageSize = response.data.size;
          }
        });
      },
      load() {
        var params = new URLSearchParams();
        if (
          this.selectBlogUid == null ||
          this.selectBlogUid == "" ||
          this.selectBlogUid == undefined
        ) {
          return;
        }
        params.append("blogSortUid", this.selectBlogUid);
        params.append("currentPage", this.currentPage + 1);
        getArticleByBlogSortUid(params).then(response => {
          if (response.code == this.$ECode.SUCCESS) {
            this.itemByDate = this.itemByDate.concat(response.data.records);
            this.currentPage = response.data.current;
            this.pageSize = response.data.size;
          }
        });
      },
      //跳转到搜索详情页
      goToList(type, entity) {
        switch (type) {
          case "tag": {
            // 标签uid
            let routeData = this.$router.resolve({
              path: "/list",
              query: {
                tagUid: entity.uid
              }
            });
            window.open(routeData.href, "_blank");
          }
          break;
        case "blogSort": {
          let routeData = this.$router.resolve({
            path: "/list",
            query: {
              sortUid: entity.blogSort.uid
            }
          });
          window.open(routeData.href, "_blank");
        }
        break;
        case "author": {
          let routeData = this.$router.resolve({
            path: "/list",
            query: {
              author: entity.author
            }
          });
          window.open(routeData.href, "_blank");
        }
        break;

        case "blogContent": {
          this.$router.push({ path: '/info', query: { id: entity.id, classlistId: entity.classlistId, siteId: this.siteId }})
          // let routeData = this.$router.resolve({
          //   path: "/info",
          //   query: {
          //     id: entity.id
          //   }
          // });
          // window.open(routeData.href, "_self");
        }
        break;
        }
      }
    }
  };

</script>


<style>
  .sortBox {
    color: #555;
  }

  .sortBoxSpan {
    cursor: pointer;
  }

  .sortBoxSpan:hover {
    color: #409eff;
  }

  .sortBoxSpanSelect {
    color: #409eff;
  }

  .itemTitle {
    cursor: pointer;
  }

  .itemTitle:hover {
    color: #409eff;
  }

  .elTag {
    cursor: pointer;
  }

</style>
